<template>
  <div class="badReasons-container">
    <el-card shadow="never" style="margin-top: 16px;">
      <div slot="header" class="clearfix">
        <el-button style="float: right;" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
      </div>
<!--      <header-help-doc :headContext="headContext"></header-help-doc>-->
      <el-input v-model="searchKey" placeholder="请输入内容" class="inSearch" style="width: 30%" clearable @clear="clearInput">
        <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
      </el-input>
      <el-alert type="success" show-icon :title="findTableTotal" :closable="false" style="margin: 12px 0 0 0 "></el-alert>
      <!--表格 -->
      <AzureDynamicTable :data="tableData" :column-des-objs="columnDesObjs" :show-seq="true"
                         :border="false"
                         @selection-change="handleSelect"
                         >
        <!--详细 -->
        <template slot="Detail" slot-scope="{scope:{row,$index}}">
          <el-button
            @click="openDetail({row,$index})"
            size="mini" type="text">配置细类
          </el-button>
        </template>
        <!--操作 -->
        <template slot="operator" slot-scope="{scope:{row,$index}}">
          <AButton type="primary" @click="edit({row})">修改</AButton>
          <AButton type="info"  @click="remove({row})">删除</AButton>
        </template>
      </AzureDynamicTable>
    </el-card>
    <!--分页 -->
    <pagination :limit.sync="pageSize" :page.sync="currentPage"
                :total="total"
                @pagination="getData"
                v-show="total>0"/>
    <!--编辑 -->
    <el-dialog title="修改数据" :visible.sync="dialogEditVisible">
       <el-form :label-width="globalLabelWidth1" ref="editFormData" :model="editForm" :rules="rule">
         <el-form-item label="不良原因大类编码" prop="ReasonID">
           <el-input style="width: 50%" v-model="editForm.ReasonID"></el-input>
         </el-form-item>
         <el-form-item label="不良原因大类名称" prop="Description">
           <el-input style="width: 50%" v-model="editForm.Description"></el-input>
         </el-form-item>
       </el-form>
      <div slot="footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit('editFormData')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import HeaderHelpDoc from '@/components/ATheFridayClub/HeaderHelpDoc'
  import Pagination from '@/components/Pagination/index'
  import { GetQcReasons, AddQcReason, UpdateReason, DeleteReason, } from '@/api/badReasons'
  import { ERR_OK } from '@/utils/commons'
  import { getBadReasonsStatus } from '@/enums/basics'
  import  layoutMixin  from '@/mixins/layoutMixin'
  import  form  from '@/mixins/form'
  import { deepClone } from '@/utils'
  import AButton from '@/components/ATheFridayClub/AButton'

  export default {
    name: 'badReasons',
    components: { AzureDynamicTable, Pagination,AButton,HeaderHelpDoc },
    mixins:[layoutMixin,form],
    data() {
      return {
        headContext:'对不良原因进行增删改查等等常规操作。',
        tableData: [],
        columnDesObjs: [
          { label: '不良原因大类编码', key: 'ReasonID' ,tag: true},
          { label: '不良原因大类名称', key: 'Description' },
          // { label: '状态', key: 'Status', filter: getBadReasonsStatus,tag:true },
          { label: '创建人', key: 'CreateByMan' },
          { label: '创建时间', key: 'CreateTime',dateFormat:true },
          { label: '更新人', key: 'LastModifyMan' },
          { label: '更新时间', key: 'LastModifyTime',dateFormat:true },
          { label: '不良原因细类', key: 'Detail' },
          { label: '操作', key: 'operator' },
        ],
        rule:{
          Description:[
            {required: true, message: '不良原因大类名称不能为空', trigger: 'blur'}
          ] ,
          ReasonID:[
            {required: true, message: '不良原因大类编码不能为空', trigger: 'blur'}
          ]
        },
        editForm:{},
        currentPage: 1,
        total: 0,
        pageSize: 10,
        searchKey: '',
        dialogEditVisible:false
      }
    },
    created() {
      this.getData()
    },
    computed:{
      findTableTotal(){
        return `成功查询到 ${this.total} 条不良原因`
      }
    },
    methods: {
      getData({ inPage = this.currentPage, inPages = this.pageSize, inDescription = this.searchKey } = {}) {
        GetQcReasons({ inPage, inPages, inDescription })
          .then(({ Code, Result }) => {
            if (Code === ERR_OK) {
              const { Rows, RecordCount, CurrentPage } = Result
              this.tableData = Rows
              this.total = RecordCount
              this.currentPage = CurrentPage
            }
          })
      },
      add() {
        this.$prompt('不良原因大类名称', '新增数据', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(async({ value }) => {
            const Description = value
            const { Code, Result } = await AddQcReason({ Description })
            if (Code === ERR_OK) {
              this.$message.success('新增成功！')
              this.getData()
            }
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      edit(row) {
        this.dialogEditVisible = true;
        this.editForm = deepClone(row.row)
      },
      async submitEdit(){
        try {
          await this.validateForm('editFormData')
          const {ReasonID,Description} = this.editForm
          const {Code,Result} = await UpdateReason({ ReasonID,Description })
          if(Code === ERR_OK){
            this.$message.success('修改成功！');
            this.dialogEditVisible = false;
            this.getData();
          }
        }catch (e) {
          console.log(e)
        }
      },
      openDetail(row){
        this.$router.push({path:'/badReasonsDetail' ,query:{ID:row.row.ReasonID,badReasonName:row.row.Description}})
      },
      remove(row) {
        this.$confirm('此操作将永久删除选中的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { ReasonID } = row.row
          const { Code, Result } = await DeleteReason({ inQcReasonId:ReasonID })
          if (Code === ERR_OK) {
            this.$message.success('删除成功！')
            await this.getData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      clearInput(){
        this.getData();
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
